<template>
  <section class="proxy-page">
    <div class="diy-vue" id="v2"></div>
    <TT />
  </section>
</template>
<script>
import {
  obj,
  objProxy
} from '@utils/Proxy'
// vue 2
// import {
//   Vue
// } from '@utils/observer/reactive-v2'
import Vue from 'vue'
export default {
  data () {
    return {}
  },
  created () {    
    this.createElement()
  },
  mounted () {
    // this.objHandler()
    // this.objProxyHandler()
    // this.DIYvue()
  },
  methods: {
    objHandler () {
      obj.count = 1
      ++obj.count
      console.log(obj.count)
    },
    objProxyHandler () {
      objProxy.name = 'xiaofei'
      console.log('objProxy name: ', objProxy.name)
    },
    DIYvue () {
      // DIY Vue
      const vue = new Vue({
        el: 'v2',
        data () {
          return {
            text: 'hello',
            msg: 'world'
          }
        }
      }).mount()
      setTimeout(() => {
        vue._data.msg = 'fei'
      }, 2000)
    },
    createElement () {
      Vue.component('TT', {
        render: function (createElement) {
          return createElement('h1', 'hi createElement')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
